import React, { useEffect, useState } from "react";
// import * as echarts from "echarts";
import { Map, MapvglView, MapvglLayer, Polyline, Marker, Label } from 'react-bmapgl'
import styleJson1 from './custom_map_config (1).json'
import './index.scss'
export default function Qujing() {
    let [position, setposition] = useState(new window.BMapGL.Point(108.935254, 34.405189),)//西安 长安
    // const defaultIconUrl = '//mapopen.bj.bcebos.com/cms/react-bmap/markers_new2x_fbb9e99.png';
    // let icons = {
    //     'yellowgreen': new window.BMapGL.Icon(defaultIconUrl, new window.BMapGL.Size(42 / 2, 66 / 2), {
    //         imageOffset: new window.BMapGL.Size(454 / 2, 378 / 2),
    //         imageSize: new window.BMapGL.Size(600 / 2, 600 / 2)
    //     }),
    // }
    let [icon, seticon] = useState('simple_blue')
    // const randomParams = () => {
    //     setposition(new window.BMapGL.Point(116.404449 + Math.random() - 0.5, 39.914889 + Math.random() - 0.5),)
    //     seticon(`blue${Math.ceil(Math.random() * 10)}`)
    // }
    const settings = JSON.parse(localStorage.getItem("settings")) || {};
    const [styles, setstyles] = useState(settings.colorData);
    const [colors, setcolors] = useState(settings.colors);

    return (


        < Map
            center={new window.BMapGL.Point(105.403119, 38.028658)}
            zoom={5}
            mapStyleV2={{ styleJson: styleJson1 }
            }
            enableScrollWheelZoom
        >

            <MapvglView effects={['bright']}>
                <MapvglLayer
                    type="PointLayer"
                    // data={point}
                    options={{
                        blend: 'lighter',
                        size: 6,
                        color: 'rgb(255, 53, 0, 0.6)',

                    }}

                />
            </MapvglView>
            <div>
                {/* 取经路径图 */}
                <Polyline
                    path={[
                        new window.BMapGL.Point(108.935254, 34.405189),//西安 长安
                        new window.BMapGL.Point(103.836787, 36.078204),//兰州
                        new window.BMapGL.Point(102.644554, 37.934378), // 威武 凉州
                        new window.BMapGL.Point(96.349897, 40.55498), //name: '双塔水库', oldName: '唐代玉门关
                        new window.BMapGL.Point(93.51575, 42.835347), //{name: '哈密', oldName: '伊吾'},
                        new window.BMapGL.Point(90.221529, 42.893574), //ame: '鄯善', oldName: '白力城'},
                        new window.BMapGL.Point(89.202761, 42.955506), //{name: '吐鲁番', oldName: '高昌王城'},
                        new window.BMapGL.Point(86.576619, 42.069454), //{name: '焉耆', oldName: '阿耆尼'},
                        new window.BMapGL.Point(80.250095, 41.188412), //{name: '阿克苏', oldName: '跋禄迦国'},,
                        new window.BMapGL.Point(75.292596, 42.924894), //name: '托克马克',oldName: '碎叶'remark: '今吉尔吉斯之托克马克西南八公里处，,,
                        new window.BMapGL.Point(67.023766, 39.874394), // {name: '撒马尔罕', oldName: '飒秣建国',
                        new window.BMapGL.Point(66.085504, 38.730909), //{name: '古佐尔', oldName: '铁门关'
                        new window.BMapGL.Point(67.820816, 34.819317), //{name: '巴米扬', oldName: '梵衍那国', remark: '阿富汗之巴米扬，有被
                        new window.BMapGL.Point(69.200613, 34.568583), //{name: '喀布尔', oldName: '迦毕试国', remark: '阿富汗喀布尔流域'},
                        new window.BMapGL.Point(71.525011, 34.016651), //{name: '白沙瓦', oldName: '健陀罗国', remark: '巴基斯坦白沙瓦'},
                        new window.BMapGL.Point(74.88679, 34.129629), // {name: '斯利那加', oldName: '迦湿弥罗国', remark: '今克什米尔印度控制区之斯利那加'},
                        new window.BMapGL.Point(75.851314, 30.906216), // {name: '卢迪亚纳', oldName: '磔迦国', remark: '巴基斯坦旁遮普地区
                        new window.BMapGL.Point(79.756755, 26.753289), // {name: '卡瑙杰', oldName: '曲女城', remark: '玄奘归途中在此参加了有20余国君
                        new window.BMapGL.Point(85.459473, 25.12406), // {name: '那烂陀寺', oldName: '摩揭陀国的那烂陀寺', remark: '今印度比哈尔邦王舍城附近'},

                    ]}
                    strokeColor={styles[colors][2]}
                    strokeWeight={3}
                />
                {/* 散点取经图 */}
                <div>
                    <Marker style={{ color: styles[colors][0] }}
                        position={position}
                        icon={icon}

                        autoViewport
                        viewportOptions={{
                            zoomFactor: -12
                        }}
                    />
                    <Marker style={{ color: 'red ' }} //兰州
                        position={new window.BMapGL.Point(103.836787, 36.078204)}
                        icon={icon}

                        autoViewport
                        viewportOptions={{
                            zoomFactor: -12
                        }}
                    />
                    <Marker style={{ color: styles[colors][0] }}
                        position={new window.BMapGL.Point(102.644554, 37.934378)} // 凉州
                        icon={icon}

                        autoViewport
                        viewportOptions={{
                            zoomFactor: -12
                        }}
                    />
                    <Marker style={{ color: styles[colors][0] }}
                        position={new window.BMapGL.Point(96.349897, 40.55498)} //唐代玉门关
                        icon={icon}

                        autoViewport
                        viewportOptions={{
                            zoomFactor: -12
                        }}
                    />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(93.51575, 42.835347)} //伊吾
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(90.221529, 42.893574)} //白力城
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(89.202761, 42.955506)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(86.576619, 42.069454)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(75.292596, 42.924894)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(67.023766, 39.874394)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(66.085504, 38.730909)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(67.820816, 34.819317)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(69.200613, 34.568583)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(71.525011, 34.016651)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(74.88679, 34.129629)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(75.851314, 30.906216)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(79.756755, 26.753289)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
                    <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(85.459473, 25.12406)}
                        icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                </div>
                <div >
                    {/* 文字标注 */}
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }}
                        position={new window.BMapGL.Point(108.935254, 34.405189)}
                        text="长安"


                    />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }}
                        position={new window.BMapGL.Point(103.836787, 36.078204)}
                        text="兰州"
                    />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(102.644554, 37.934378)} text='凉州' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(96.349897, 40.55498)} text='唐代玉门关' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(93.51575, 42.835347)} text='伊吾' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(90.221529, 42.893574)} text='白力城' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(89.202761, 42.955506)} text='高昌王城' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(86.576619, 42.069454)} text='阿耆尼' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(80.250095, 41.188412)} text='跋禄迦国' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(75.292596, 42.924894)} text='碎叶' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(67.023766, 39.874394)} text='飒秣建国' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(66.085504, 38.730909)} text='铁门关' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(67.820816, 34.819317)} text='梵衍那国' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(69.200613, 34.568583)} text='迦毕试国' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(71.525011, 34.016651)} text='健陀罗国' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(74.88679, 34.129629)} text='迦湿弥罗国' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(75.851314, 30.906216)} text='磔迦国' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(79.756755, 26.753289)} text='曲女城' />
                    <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(85.459473, 25.12406)} text='摩揭陀国的那烂陀寺' />


                </div>
            </div>
            {/* 东渡 */}
            <div>
                {/* 洞鉴路径 */}
                <Polyline
                    path={[
                        new window.BMapGL.Point(108.935254, 34.405189),//西安 长安
                        new window.BMapGL.Point(111.109451, 34.726915),//陕州 陕州
                        new window.BMapGL.Point(112.46661, 34.63163),//洛阳 洛阳 
                        new window.BMapGL.Point(114.307256, 34.812786),//开封 汴州 119.41971,32.402383
                        new window.BMapGL.Point(119.41971, 32.402383),//扬州 扬州 
                        new window.BMapGL.Point(127.945404, 26.501301),//{name: '冲绳岛那霸市', oldName: '阿儿奈波岛', remark: ''},
                        new window.BMapGL.Point(129.36212, 28.267847),//{name: '奄美市', oldName: '奄美大岛', remark: ''},
                        new window.BMapGL.Point(130.512714, 30.344594),// {name: '屋久岛', oldName: '益救岛', remark: ''},
                        new window.BMapGL.Point(130.659238, 30.996905),// {name: '佐多岬', oldName: '佐多岬', remark: ''},
                        new window.BMapGL.Point(130.319912, 31.420682),//{name: '南萨摩市鹿儿岛县', oldName: '秋妻屋浦',
                        new window.BMapGL.Point(129.818585, 32.821946),//{name: '长崎', oldName: '鹿濑？'
                        new window.BMapGL.Point(130.463451, 33.617169),// {name: '太宰府', oldName: '太宰府', remark: ''},
                        new window.BMapGL.Point(135.502182, 34.667801),//  {name: '难波', oldName: '难波', remark: ''},
                        new window.BMapGL.Point(135.839829, 34.688865),//  {name: '奈良东大寺', oldName: '奈良东大寺', remark: ''},
                    ]}
                    strokeColor={styles[colors][1]}
                    strokeWeight={3} //
                />
                {/* 字体 */}
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(108.935254, 34.405189)} text='长安' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(111.109451, 34.726915)} text='陕州' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(112.46661, 34.63163)} text='洛阳' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(114.307256, 34.812786)} text='洛阳' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(119.41971, 32.402383)} text='扬州' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(127.945404, 26.501301)} text='阿儿奈波岛' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(129.36212, 28.267847)} text='奄美大岛' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(130.512714, 30.344594)} text='益救岛' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(130.659238, 30.996905)} text='佐多岬' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(130.319912, 31.420682)} text='秋妻屋浦' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(129.818585, 32.821946)} text='鹿濑？' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(130.463451, 33.617169)} text='太宰府' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(135.502182, 34.667801)} text='难波' />
                <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(135.839829, 34.688865)} text='奈良东大寺' />


                {/* 散点 */}
                <Marker position={new window.BMapGL.Point(135.839829, 34.688865)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(135.502182, 34.667801)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(130.463451, 33.617169)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(129.818585, 32.821946)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(130.319912, 31.420682)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(130.659238, 30.996905)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(130.512714, 30.344594)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(129.36212, 28.267847)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(127.945404, 26.501301)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(119.41971, 32.402383)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(114.307256, 34.812786)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(112.46661, 34.63163)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker position={new window.BMapGL.Point(111.109451, 34.726915)}
                    icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

                <Marker
                    position={new window.BMapGL.Point(108.935254, 34.405189)}
                    icon={'simple_red'}

                    autoViewport
                    viewportOptions={{
                        zoomFactor: -12
                    }}
                />

            </div>

            {/* 我的位置 */}
            <Marker
                position={new window.BMapGL.Point(115.499056, 38.819969)} //保定
                icon={'location'}

                autoViewport
                viewportOptions={{
                    zoomFactor: -12
                }}
            />
            {/* 我去过的地方 */}
            <Marker
                position={new window.BMapGL.Point(80.511682, 40.889349)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(80.511682, 40.889349)} text='阿克苏' />
            <Marker
                position={new window.BMapGL.Point(84.892161, 45.587086)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(84.892161, 45.587086)} text='克拉玛依' />

            <Marker
                position={new window.BMapGL.Point(84.906867, 44.408777)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(84.906867, 44.408777)} text='奎屯' />

            <Marker
                position={new window.BMapGL.Point(86.176028, 41.665799)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(86.176028, 41.665799)} text='库尔勒' />

            <Marker
                position={new window.BMapGL.Point(87.285652, 44.025313)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(87.285652, 44.025313)} text='昌吉' />

            <Marker
                position={new window.BMapGL.Point(87.635074, 43.840127)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(87.635074, 43.840127)} text='乌鲁木齐' />

            <Marker
                position={new window.BMapGL.Point(89.180914, 42.971974)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(89.180914, 42.971974)} text='吐鲁番' />

            <Marker
                position={new window.BMapGL.Point(89.180914, 42.971974)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(89.180914, 42.971974)} text='宝鸡' />

            <Marker
                position={new window.BMapGL.Point(108.935254, 34.405189)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(108.935254, 34.405189)} text='西安' />

            <Marker
                position={new window.BMapGL.Point(116.37918, 39.981949)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(116.37918, 39.981949)} text='北京' />

            <Marker
                position={new window.BMapGL.Point(117.126112, 36.667902)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(117.126112, 36.667902)} text='济南' />
            <Marker
                position={new window.BMapGL.Point(120.389171, 36.076194)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(120.389171, 36.076194)} text='青岛' />
            <Marker
                position={new window.BMapGL.Point(121.615591, 38.923669)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(121.615591, 38.923669)} text='大连' />

            <Marker
                position={new window.BMapGL.Point(120.158881, 30.286269)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(120.158881, 30.286269)} text='杭州' />

            <Marker
                position={new window.BMapGL.Point(120.5881, 31.305786)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(120.5881, 31.305786)} text='苏州' />

            <Marker
                position={new window.BMapGL.Point(121.481402, 31.23914)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(121.481402, 31.23914)} text='上海' />

            <Marker
                position={new window.BMapGL.Point(126.537299, 45.811436)} icon={'end'} autoViewport viewportOptions={{ zoomFactor: -12 }}
            />
            <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][4] }} position={new window.BMapGL.Point(126.537299, 45.811436)} text='哈尔滨' />


        </Map >


    )
}


